import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form, Input, Button, message, Spin } from "antd";
import { connect } from "react-redux";
import DocumentTitle from "react-document-title";
import { login } from "@/store/actions";
import PATH_MAP from '@/config/pathConstance';
import "./index.less";
import loginLogo from "@/assets/images/login_logo.png"

// 账户: dovakin
// 密码：123456
const Login = (props) => {
  const { token, login } = props;

  const [loading, setLoading] = useState(false);

  const handleLogin = ({ username, password }) => {
    // 登录完成后 发送请求 调用接口获取用户信息
    setLoading(true);
    login(username, password)
      .then((data) => {
        message.success("登录成功");
      })
      .catch((error) => {
        setLoading(false);
        message.error(error);
      });
  };
  const classList = ["bg0", "bg1", "bg2"];
  const rand = (min, max) => Math.round(Math.random() * (max - min)) + min;

  if (token) {
    return <Redirect to={PATH_MAP.DASHBORD} />;
  }
  return (
    <DocumentTitle title={"Login"}>
      <div className={`login-container ${classList[rand(0, 2)]}`} >
        <Form onFinish={handleLogin} className="content" initialValues={{ username: 'dovakin', password: '123456' }}>
          <div className="title">
            <img src={loginLogo} alt='login' />
          </div>

          <Form.Item name="username" rules={
            [
              {
                required: true,
                whitespace: true,
                message: "请输入用户名",
              },
            ]
          }>
            <Input
              prefix={
                <UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />
              }
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item name="password" rules={[
            {
              required: true,
              whitespace: true,
              message: "请输入密码",
            },
          ]}>
            <Input
              prefix={
                <LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />
              }
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Spin spinning={loading} tip="...">

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              > 登 录</Button>
            </Form.Item>
          </Spin>

        </Form>
      </div>

    </DocumentTitle>
  );
};


export default connect((state) => state.user, { login })(
  Login
);
